<template>
     <div class="warnDesk">
		<div class="Head-top">
			<div class='now_warning'>
				<p class='title'>今日预警</p>
				<div class='warning_detail'>
					<dl>
						<dt @click='changeTable(0)'>
							<img src='../../assets/img/warn/u3226.png'/>
							<img class='center_img' src='../../assets/img/warn/u3228.png'/>
						</dt>
						<dd>
							<p>低价商品总数（个）</p>
							<nuxt-link to="/warning/detailList?index=0">
								<span>{{this.lowRecordCount}}</span>
							</nuxt-link>
						</dd>
					</dl>
					<dl>
						<dt @click='changeTable(1)'>
							<img src='../../assets/img/warn/u3235.png'/>
							<img class='center_img' src='../../assets/img/warn/u3293.png'/>
						</dt>
						<dd>
							<p>假货商品总数（个）</p>
							<nuxt-link to="/warning/detailList?index=1">
								<span>{{this.fakeRecordCount}}</span>
							</nuxt-link>
						</dd>
					</dl>
					<dl>
						<dt @click='changeTable(2)'>
							<img src='../../assets/img/warn/u3231.png'/>
							<img class='center_img' src='../../assets/img/warn/u3233.png'/>
						</dt>
						<dd>
							<p>非授权商家（个）</p>
							<nuxt-link to="/warning/detailList?index=2">
								<span>{{this.nondAgencyCount}}</span>
							</nuxt-link>
						</dd>
					</dl>
				</div>
			</div>
			<nuxt-link to="/warning/collectList?index=0">
				<el-button  type="primary" v-show='tableShow0' style="float: right;">查看更多</el-button>
			</nuxt-link>
			<el-table :data="tableList0" border  v-show='tableShow0'>
			    <el-table-column prop="brandName" label="品牌名称"></el-table-column>
			    <el-table-column prop="keyWordsName" label="sku关键词"></el-table-column>
			    <el-table-column prop="platTypeText"  label="平台" width="100"></el-table-column>
			    <el-table-column prop="whiteLowCount" label="白名单低价商品数量"></el-table-column>
			    <el-table-column prop="lowCount" label="非白名单低价商品数量"></el-table-column>						    
			    <el-table-column prop="whiteLowPrice" label="白名单低价区间"> </el-table-column>
			    <el-table-column prop="lowPrice" label="非白名单低价区间"></el-table-column>
			    <el-table-column prop="gmtCreateString" label="更新时间" ></el-table-column>
			</el-table>
			<nuxt-link to="/warning/collectList?index=1">
				<el-button  type="primary" v-show='tableShow1' style="float: right;">查看更多</el-button>
			</nuxt-link>
			<el-table :data="tableList1" border  v-show='tableShow1'>
			    <el-table-column prop="brandName" label="品牌名称"></el-table-column>
			    <el-table-column prop="keyWordsName" label="sku关键词"></el-table-column>
			    <el-table-column prop="platTypeText"  label="平台" width="100"></el-table-column>
			    <el-table-column prop="whiteFakeCount" label="白名单假货商品数量"></el-table-column>
			    <el-table-column prop="fakeCount" label="非白名单假货商品数量"></el-table-column>						    
			    <el-table-column prop="fakePrice" label="假货价格区间"> </el-table-column>
			    <el-table-column prop="gmtCreateString" label="更新时间" ></el-table-column>
			</el-table>
			<nuxt-link to="/warning/collectList?index=2">
				<el-button  type="primary" v-show='tableShow2' style="float: right;">查看更多</el-button>
			</nuxt-link>
			<el-table :data="tableList2" border  v-show='tableShow2'>
			    <el-table-column prop="brandName" label="品牌名称"></el-table-column>
			    <el-table-column prop="platTypeText" label="平台" width="100"></el-table-column>
			    <el-table-column prop="agencyCount" label="非授权商家数量"></el-table-column>
			    <el-table-column prop="gmtModifyString"  label="更新时间"></el-table-column>
			</el-table>
		</div>
		<div class="Head-top">
			<div class='now_warning'>
				<p class='title'>累计数据</p>
				<div class='warning_detail'>
					<dl>
						<dt @click='changeTable(3)'>
							<img src='../../assets/img/warn/u3226.png'/>
							<img class='center_img' src='../../assets/img/warn/u3228.png'/>
						</dt>
						<dd>
							<p>低价商品总数（个）</p>
							<nuxt-link to="/warning/detailList?index=00">
								<span>{{this.lowRecordCount1}}</span>
							</nuxt-link>
						</dd>
					</dl>
					<dl>
						<dt @click='changeTable(4)'>
							<img src='../../assets/img/warn/u3235.png'/>
							<img class='center_img' src='../../assets/img/warn/u3293.png'/>
						</dt>
						<dd>
							<p>假货商品总数（个）</p>
							<nuxt-link to="/warning/detailList?index=11">
								<span>{{this.fakeRecordCount1}}</span>
							</nuxt-link>
						</dd>
					</dl>
					<dl>
						<dt @click='changeTable(5)'>
							<img src='../../assets/img/warn/u3231.png'/>
							<img class='center_img' src='../../assets/img/warn/u3233.png'/>
						</dt>
						<dd>
							<p>非授权商家（个）</p>
							<nuxt-link to="/warning/detailList?index=22">
								<span>{{this.nondAgencyCount1}}</span>
							</nuxt-link>
						</dd>
					</dl>
				</div>
			</div>
			<nuxt-link to="/warning/collectList?index=00">
				<el-button  type="primary" v-show='tableShow3' style="float: right;">查看更多</el-button>
			</nuxt-link>
			<el-table :data="tableList3" border  v-show='tableShow3'>
			    <el-table-column prop="brandName" label="品牌名称"></el-table-column>
			    <el-table-column prop="keyWordsName" label="sku关键词"></el-table-column>
			    <el-table-column prop="platTypeText"  label="平台" width="100"></el-table-column>
			    <el-table-column prop="whiteLowCount" label="白名单低价商品数量"></el-table-column>
			    <el-table-column prop="lowCount" label="非白名单低价商品数量"></el-table-column>						    
			    <el-table-column prop="whiteLowPrice" label="白名单低价区间"> </el-table-column>
			    <el-table-column prop="lowPrice" label="非白名单低价区间" ></el-table-column>
			    <el-table-column prop="gmtCreateString" label="更新时间"></el-table-column>
			</el-table>
			<nuxt-link to="/warning/collectList?index=11">
				<el-button  type="primary" v-show='tableShow4' style="float: right;">查看更多</el-button>
			</nuxt-link>
			<el-table :data="tableList4" border  v-show='tableShow4'>
			    <el-table-column prop="brandName" label="品牌名称"></el-table-column>
			    <el-table-column prop="keyWordsName" label="sku关键词"></el-table-column>
			    <el-table-column prop="platTypeText"  label="平台" width="100"></el-table-column>
			    <el-table-column prop="whiteFakeCount" label="白名单假货商品数量"></el-table-column>
			    <el-table-column prop="fakeCount" label="非白名单假货商品数量"></el-table-column>						    
			    <el-table-column prop="fakePrice" label="假货价格区间" > </el-table-column>
			    <el-table-column prop="gmtCreateString" label="更新时间"></el-table-column>
			</el-table>
			<nuxt-link to="/warning/collectList?index=22">
				<el-button  type="primary" v-show='tableShow5' style="float: right;">查看更多</el-button>
			</nuxt-link>
			<el-table :data="tableList5" border  v-show='tableShow5'>
			    <el-table-column prop="brandName" label="品牌名称"></el-table-column>
			    <el-table-column prop="platTypeText" label="平台" width="100"></el-table-column>
			    <el-table-column prop="agencyCount" label="非授权商家数量" ></el-table-column>
			    <el-table-column prop="gmtModifyString"  label="更新时间"></el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import {Table, Icon, Button, TableColumn,Tabs} from 'element-ui'
	Vue.use(Table)
	Vue.use(Button)
	Vue.use(TableColumn)
	Vue.use(Icon)
	Vue.use(Tabs)

    export default {
        head(){
            return {
	            title: "预警工作台",
	            meta: [
	                { hid: 'warnDesk-warning', name: 'warnDesk-warning', content: 'warnDesk-warning'}
	            ]
            }
        },
        data() {
	      	return {
	      		tabName: '预警工作台',
	      		tableList0:[],
	      		tableList1:[],
	      		tableList2:[],
	      		tableList3:[],
	      		tableList4:[],
	      		tableList5:[],
	            tableShow0: true,
			    tableShow1: false,
			    tableShow2: false,
			    tableShow3: true,
			    tableShow4: false,
			    tableShow5: false,
			    lowRecordCount:0,
			    fakeRecordCount:0,
			    nondAgencyCount:0,
			    lowRecordCount1:0,
			    fakeRecordCount1:0,
			    nondAgencyCount1:0
	      	}
        },
        methods: {
	      	changeTable (index) {
                if(index==0){
                	this.tableShow0=true;this.tableShow1=false;this.tableShow2=false
                }
                if(index==1){
                	this.getfakeListDesk();
                	this.tableShow0=false;this.tableShow1=true;this.tableShow2=false
                }
                if(index==2){
                	this.BrandAllListWarnDesk();
                	this.tableShow0=false;this.tableShow1=false;this.tableShow2=true 
                }
                if(index==3){
                	this.tableShow3=true;this.tableShow4=false;this.tableShow5=false
                }
                if(index==4){
                	this.getfakeListDesk1();
                	this.tableShow3=false;this.tableShow4=true;this.tableShow5=false
                }
                if(index==5){
                	this.BrandAllListWarnDesk1();
                	this.tableShow3=false;this.tableShow4=false;this.tableShow5=true 
                }
	    	},
	    	getAuditListDesk(){//今日低价列表
	    		this.$store.dispatch("lowListwarn",{
	    			today:1,
    				pageNum:1,
            		pageSize:5
    			}).then(res=>{
    				if(res && res.data.successed){
    					var result=res.data;
    					this.tableList0=result.data.list;
    				}
    			}).catch((error) => {})
	    	},
	    	getfakeListDesk(){//今日假货列表
	    		this.$store.dispatch("fakeListwarn",{
	    			today:1,
		    		pageNum:1,
            		pageSize:5
		    	}).then(res=>{
    				if(res && res.data.successed){
    					var result=res.data;
    					this.tableList1=result.data.list;
    				}
    			}).catch((error) => {})
	    	},
	    	BrandAllListWarnDesk(){//今日非授权商家列表
	    		this.$store.dispatch("RptBrandAllListwarn",{
	    			today:1,
    				pageNum: 1,
            		pageSize: 5
    			}).then(res=>{
    				if(res && res.data.successed){
    					var result=res.data;
    					this.tableList2=result.data.list;
    				}
    			}).catch((error) => {})
	    	},
	    	getAuditListDesk1(){//累计低价列表
	    		this.$store.dispatch("lowListwarn",{
	    			today:0,
    				pageNum:1,
            		pageSize:5
    			}).then(res=>{
    				if(res && res.data.successed){
    					var result=res.data;
    					this.tableList3=result.data.list;
    				}
    			}).catch((error) => {})
	    	},
	    	getfakeListDesk1(){//累计假货列表
	    		this.$store.dispatch("fakeListwarn",{
	    			today:0,
		    		pageNum:1,
            		pageSize:5
		    	}).then(res=>{
    				if(res && res.data.successed){
    					var result=res.data;
    					this.tableList4=result.data.list;
    				}
    			}).catch((error) => {})
	    	},
	    	BrandAllListWarnDesk1(){//累计非授权商家列表
	    		this.$store.dispatch("RptBrandAllListwarn",{
	    			today:0,
    				pageNum:1,
            		pageSize: 5
    			}).then(res=>{
    				if(res && res.data.successed){
    					var result=res.data;
    					this.tableList5=result.data.list;
    				}
    			}).catch((error) => {})
	    	},
	    	gettodayWarndataDesk(){//今日预警数据
	    		this.$store.dispatch("todayWarndata").then(res=>{
	    			var result=res.data.data;
	    			this.lowRecordCount=this.toThousands(result.lowRecordCount);
	    			this.fakeRecordCount=this.toThousands(result.fakeRecordCount);
	    			this.nondAgencyCount=this.toThousands(result.nondAgencyCount);
	    		}).catch((error) => {})
	    	},
	    	getcountNumberWarnDesk(){
	    		this.$store.dispatch("countNumberwarn").then(res=>{
	    			var result=res.data.data;
	    			this.lowRecordCount1=this.toThousands(result.lowRecordCount);
	    			this.fakeRecordCount1=this.toThousands(result.fakeRecordCount);
	    			this.nondAgencyCount1=this.toThousands(result.nondAgencyCount);
	    		}).catch((error) => {})
	    	},
	    	toThousands(num){//格式化数字，每三位逗号
            	var num = (num || 0).toString(), result = '';  
			    while (num.length > 3) {  
			        result = ',' + num.slice(-3) + result;  
			        num = num.slice(0, num.length - 3);  
			    }  
			    if(num){
			    	result = num + result; 
			    }
			    return result;  
			}
        },
        computed: {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            })
        },
        created () {
            //pageTab
            this.getAuditListDesk();
            this.getAuditListDesk1();
            this.gettodayWarndataDesk();
            this.getcountNumberWarnDesk();
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
        }
    }
</script>

<style lang="scss">
	.Head-top{
		p,h1,h2{margin: 0;padding: 0;}
		width:95%;
		background:#fff;
		padding:25px;
		.now_warning{
			/*width:960px;*/height:142px;
			border:1px solid rgba(235, 235, 235, 1);
			display:flex;flex-direction:column;
			p.title{
				font-weight: 400;font-style: normal;font-size: 14px;
				color: #666;border-bottom:1px solid  rgba(235, 235, 235, 1);
				line-height:40px;
				padding-left: 30px;margin: 0;
			}
			.warning_detail{
				flex:1;display:flex;flex-direction:row;align-items:center;
				dl{
					flex:1;padding:0 0 0 40px;
					dt{
						width:56px;height:56px;
						float:left;margin-right:10px;position:relative;
						img.center_img{position:absolute;left:50%;top:50%;margin-top:-14px;margin-left:-12px}
					}
					dd {
						width:200px;margin-left:86px;
						p {color:#989898;font-size:12px;}
						span{color:#666;font-weight:500;font-size:28px;margin-top:15px;display:inline-block ;}
					}
				}
				
			}
		}
		.el-button--primary{margin-left:970px;margin-top:20px;margin-bottom:10px;background: #169bd5;}
		.el-table{
			border-color:#333!important;
			.cell{color:#333;font-weight:100;font-size:13px;}
			th{height:30px!important;line-height:30px;padding:0;background:#00ccff!important}
			td{height:30px!important;}
			th>div,td>div{padding:0!important;text-align:center!important;}
			th>div{background:#00ccff!important}
			td,th,tr{border-color:#333!important}
		}
		.el-table::after, .el-table::before{background-color:#333!important}
	}

	
	
</style>